<template>
  <div id="Classify-component">
    <div class="left">
      <LeftList @send_index="get_index"></LeftList>
    </div>
    <div class="right">
      <RightList :right_list="right_data"></RightList>
    </div>
  </div>
</template>

<script>
//左边列表
import LeftList from "@/views/classify/classify_list/LeftList.vue"
//右边列表
import RightList from "@/views/classify/classify_list/RightList.vue"

export default {
  name: "ClassfyList",
  data() {
    return {
      //储存右边列表数据
      right_data: [],
    }
  },
  components: {
    LeftList,
    RightList,
  },
  methods: {
    //获取左边框的索引
    async get_index(val) {
      //请求右边框的数据
      const { data: res } = await this.$http("/subcategory?maitKey=" + val)

      this.right_data = res.data.list
      console.log("数据", res.data.list)
    },
  },
}
</script>

<style lang="less" scoped>
#Classify-component {
  display: flex;
  height: 100%;
  .left {
    flex: 3;
  }
  .right {
    flex: 7;
    padding: 20px 8px;
  }
}
</style>
